<template>
  <div class="app-container">
    <el-card class="counselor-card">
      <!-- 卡片头部 -->
      <template #header>
        <div class="card-header">
          <!-- 返回按钮 -->
          <el-button class="back-btn" @click="goBack" :icon="ArrowLeft" circle plain/>

          <!-- 标题和状态 -->
          <div class="title-container">
            <h1 class="card-title">咨询师资格申请</h1>
            <el-tag
                v-if="form.certificationStatus !== undefined"
                :type="statusTag.type"
                class="status-tag"
            >
              {{ statusTag.text }}
            </el-tag>
          </div>
        </div>
      </template>

      <!-- 表单内容 -->
      <el-form ref="counselorRef" :model="form" :rules="rules" label-width="110px" :disabled="isFormDisabled">
        <!-- 表单项保持不变 -->
        <el-form-item label="未通过原因" v-if="form.reason">
          <el-input v-model="form.reason" disabled/>
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-select v-model="form.title" placeholder="请选择职称">
            <el-option
                v-for="dict in counselor_titles"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="bio">
          <el-input v-model="form.bio" type="textarea" autosize placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="擅长领域" prop="expertise">
          <el-input v-model="form.expertise" type="textarea" autosize placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="预约地址" prop="address">
          <el-input v-model="form.address"/>
        </el-form-item>
        <el-form-item label="相关证书" prop="certification">
          <image-upload v-model="form.certification"/>
        </el-form-item>

        <!-- 底部按钮 -->
        <el-form-item v-if="!isFormDisabled">
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="Counselor">
import {handApply, listCounselor} from "@/api/counselor/counselor";
import {reactive, ref, onMounted} from "vue";
import {ArrowLeft} from "@element-plus/icons-vue";

const {proxy} = getCurrentInstance();
const {counselor_titles, certification_status} = proxy.useDict('certification_status', 'counselor_titles');

const isSubmitting = ref(false);

const isFormDisabled = computed(() => ['0', '1'].includes(data.form.certificationStatus?.toString()));
const statusTag = computed(() => {
  const currentStatus = data.form.certificationStatus?.toString();
  const dictItem = certification_status.value.find(item => item.value === currentStatus);
  const TYPE_MAPPING = {'0': 'primary', '1': 'success', '2': 'danger'};

  return {
    text: dictItem?.label || '',
    type: TYPE_MAPPING[currentStatus] || ''
  };
});

const loading = ref(true);

const data = reactive({
  form: {},
  rules: {
    title: [
      {required: true, message: "职称不能为空", trigger: "blur"},
    ],
    bio: [
      {required: true, message: "简介/专业背景不能为空", trigger: "blur"},
    ],
    expertise: [
      {required: true, message: "擅长领域不能为空", trigger: "blur"},
    ]
  }
});

const {form, rules} = toRefs(data);

// 回到首页
function goBack() {
  proxy.$router.push('/')
}

/** 查询咨询师信息列表 */
async function getList() {
  try {
    loading.value = true;
    const res = await listCounselor();
    console.log('查询咨询师信息列表成功', res)
    Object.assign(data.form, res.data || {});

    // 自动填充未通过原因
    if (data.form.certificationStatus === '1') {
      proxy.$refs.counselorRef?.clearValidate();
    }
  } finally {
    loading.value = false;
  }
}


/** 提交按钮 */
async function submitForm() {
  try {
    isSubmitting.value = true;
    await proxy.$refs.counselorRef.validate();

    const postData = {
      ...data.form,
      certificationStatus: '0' // 强制设置为待审核状态
    };

    await handApply(postData);
    proxy.$modal.msgSuccess('提交成功，请等待审核');
    await getList();
  } catch (error) {
    console.error('提交失败:', error);
  } finally {
    isSubmitting.value = false;
  }
}

onMounted(() => {
  getList();
})
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  justify-content: center;
  min-height: 50vh;
  background: #f5f7fa;
  padding: 40px 20px;
}

.counselor-card {
  width: 1200px;
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  min-height: 600px; // 卡片最小高度

  :deep(.el-card__header) {
    padding: 40px;
    background: linear-gradient(135deg, #fafbfd, #f3f5f9);
  }

  :deep(.el-card__body) {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .card-header {
    position: relative;

    .back-btn {
      position: absolute;
      right: 20px;
      top: 20px;
      color: #8AA2A9;
      border-color: #8AA2A9;

      &:hover {
        background-color: rgba(138, 162, 169, 0.1);
      }
    }

    .title-container {
      text-align: center;
      margin-top: 20px;

      .card-title {
        font-size: 24px;
        color: #2c3e50;
        margin-bottom: 12px;
      }

      .status-tag {
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 16px;
      }
    }
  }

  // 表单容器样式
  :deep(.el-form) {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 80px;

    // 最后一个表单项（按钮容器）
    .el-form-item:last-child {
      margin-top: auto;
      width: 100%;
      padding-top: 40px;

      .dialog-footer {
        display: flex;
        justify-content: center;
        width: 100%;

        .el-button {
          padding: 12px 40px;
          font-size: 16px;
          border-radius: 8px;
          min-width: 200px;
        }
      }
    }

    .el-select {
      width: 100%;
    }

    .el-textarea :deep(textarea) {
      min-height: 120px;
    }
  }
}

// 禁用状态样式
:deep(.is-disabled) {
  .el-input__inner,
  .el-textarea__inner {
    background-color: #f8f9fa;
    color: #6c757d;
  }
}

// 加载状态
:deep(.el-loading-mask) {
  border-radius: 16px;
}
</style>

